<template>
  <div class="search">
    <input
      type="text"
      placeholder="请输入病人姓名/住院号"
      @focus="change"
      @blur="change(val)"
      :class="{ active: setState }"
      v-model="val"
      @input="reset(val)"
    />
    <span @click="setPageSize">搜索</span>
  </div>
</template>

<script setup>
import { computed, ref, toRaw } from "vue";
import { setSize } from "../../../utils/api/f_request";
const setState = ref(false);
const emit = defineEmits(["changeT", "setSizes", "setRestores"]);
const props = defineProps(["setSearchs"]);
const searchs = computed(() => {
  return props.setSearchs;
});
let vals;
//获取input值
const change = (val) => {
  setState.value = !setState.value;
  vals = val;
};
//搜索数据
const setPageSize = () => {
  setSize(vals).then((data) => {
    console.log(data);
    emit("setSizes", data.data.data);
  });
};
//input为空重置页面
const reset = (val) => {
  if (val == "") {
    emit("setRestores", toRaw(searchs.value));
    // console.log(toRaw(searchs.value));
  }
};
</script>

<style lang="scss">
.search {
  margin-left: 1%;
  height: 40px;
  display: flex;
  input {
    padding-left: 10px;
    width: 250px;
    height: 40px;
    box-sizing: border-box;
    margin-right: 5%;
    border: 1px solid #e6f1ff;
  }
  .active {
    border: 1px solid #006eff;
    outline: 0px;
  }
  span {
    display: block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #006eff;
    color: #fff;
    border-radius: 5%;
  }
  span:hover {
    background-color: #1a7dff;
    cursor: pointer;
  }
  input::-webkit-input-placeholder {
    color: #999999;
  }
}
</style>